<template>
	<view class="">
		<view class="page">

			<view class="head-bg">
				<view class="status-bar">

				</view>

				<text class="title">我的</text>

				<view class="member-info" @click="isLogin">
					<u-avatar :src="avatar">
					</u-avatar>

					<view class="member-nick">
						<text>{{userName|filterNull}}</text>
						<text>{{deptName}}</text>
					</view>

				</view>
			</view>

			<view class="profit list-item">

				<view style="flex-grow: 1; display: flex; justify-content: center;" @click="gomyincomedetail">
					<view class="profit-item">
						<text style="font-size: 24upx;color: #131313;">累计收益(元)</text>
						<text style="font-size: 30upx;color: #EC4863;margin-top: 12upx">{{totalAmount}}</text>

						<text class="rect-text">收益明细</text>

					</view>
				</view>

				<u-line dashed="true" direction="col" length="60%"></u-line>

				<view style="flex-grow: 1; display: flex; justify-content: center;" @click="gowithdraw">
					<view class="profit-item">
						<text style="font-size: 24upx;color: #131313;">可提现现金(元)</text>
						<text style="font-size: 30upx;color: #131313;margin-top: 12upx;">{{commissionAmount}}</text>
						<text class="circle-text">提现</text>
					</view>

				</view>
			</view>

			<view class="list-item" style="margin: 20upx 36upx 0;padding: 0 39upx;">
				<mine-item name="消息通知" imgSrc="/static/mine/mine_msg.png" @itemClick="goMsg"></mine-item>
				<mine-item name="意见反馈" imgSrc="/static/mine/mine_intro.png" @itemClick="goFeedback"></mine-item>
				<mine-item name="客服热线" imgSrc="/static/mine/mine_service.png" @itemClick="makephone"></mine-item>

			</view>

			<text class="logout" @click="logout" v-if="!isNotLogin">退出登录</text>

			<view style="margin: 30upx 0;text-align: center;">
				<text style="font-size: 24upx;color: #a7a7a7;">技术支持：深圳市行知网络科技有限公司</text>
			</view>

			<u-modal title="提示" content="" :show="showLogout" showCancelButton closeOnClickOverlay @confirm="confirm"
				@cancel="cancel" @close="close">

				<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定退出登录吗？</view>
			</u-modal>

		</view>


		<!-- 登录弹窗 -->
		<!-- <LoginMask></LoginMask> -->

		<!-- 底部导航 -->
		<HomeTabbar :tab="1"></HomeTabbar>
	</view>
</template>

<script>
	import get from 'lodash/get';
	import mineItem from '@/components/mine/mine-item.vue';
	import HomeTabbar from '@/components/mmv-ui/tabbar.vue';
	import {
		getMobile,
		getUserInfo,
		logout
	} from '@/api/user-api.js';
	export default {
		components: {
			mineItem,
			HomeTabbar,
		},

		data() {
			return {
				showLogout: false,
				contact: '',
			}
		},

		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			},
			avatar() {
				return get(this.userInfo, 'avatar',
					'https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto');
			},
			userName() {
				return get(this.userInfo, 'userName', '点击登录');
			},
			deptName() {
				return get(this.userInfo, 'deptName', '');
			},

			isNotLogin() {
				if (!uni.$u.test.isEmpty(this.$store.state.user.token)) {
					this.getContact();
				}
				return uni.$u.test.isEmpty(this.$store.state.user.token);
			},

			totalAmount() {
				return get(this.userInfo, 'totalAmount', 0);
			},

			commissionAmount() {
				return get(this.userInfo, 'commissionAmount', 0);
			}
		},

		onLoad(op) {
			// this.getUserInfo();
		},
		
		mounted() {
			// uni.$on('refresh', this.getUserInfo);
		},
		
		onShow() {
			if (!this.isNotLogin) {
				this.getUserInfo()
			}
		},

		methods: {
			isLogin() {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/memberinfo/memberinfo'
					})
				}

			},

			getUserInfo() {
				getUserInfo().then(res1 => {
					if (!uni.$u.test.isEmpty(res1)) {
						this.$store.commit('user/saveUserInfo', res1.data);
						uni.setStorageSync('userInfo', res1.data);

					}
				})
			},

			getContact() {
				getMobile().then(res => {
					this.contact = res.data.tenantPhone;
				})
			},

			makephone() {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					uni.makePhoneCall({
						phoneNumber: this.contact,
					})
				}
			},

			goFeedback() {

				uni.navigateTo({
					url: '/pagesB/feedback/feedback'
				})
			},


			goMsg() {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/message/message-list'
					})
				}

			},

			gomyincomedetail() {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/income-detail/income-detail'
					})
				}

			},

			gowithdraw() {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					// var commissionAmount = parseFloat(this.commissionAmount);
					// if (commissionAmount > 0) {
						uni.navigateTo({
							url: '/pagesB/withdraw/withdraw?money=' + this.commissionAmount
						})
					// } else {
					// 	uni.$u.toast('暂无可提现金额')
					// }
				}

			},


			logout() {
				if (!this.isNotLogin) {
					this.showLogout = true;
				}
			},
			async confirm() {
				this.showLogout = false
				console.log('confirm');

				await this.logoutrequest();

				//退出登录
				uni.clearStorageSync();
				this.$store.commit('user/saveToken', '');
				this.$store.commit('user/saveUserInfo', {});
			},
			cancel() {
				this.showLogout = false
			},
			close() {
				this.showLogout = false
			},

			async logoutrequest() {
				const result = await logout();
			}

		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		@include flex(column);
	}

	.head-bg {
		background: linear-gradient(#3cd4b6, #12baa4);
		height: 300upx;
		text-align: center;

		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.title {
			display: inline-block;
			color: white;
			font-size: 36upx;
			margin-top: 16upx;
			letter-spacing: 3upx;
		}

		.member-info {
			@include flex;
			margin: 38upx 63upx 0 40upx;

			.member-nick {
				@include flex(column);
				flex-grow: 1;
				justify-content: space-between;
				padding: 2upx 20upx;
				color: white;
				align-items: flex-start;

				text {
					color: white;
					font-size: 32upx;
				}

			}

			.points {
				@include flex;
				background-color: #FFE074;
				border-radius: 90upx;
				height: 43upx;
				margin-top: 8upx;
				padding: 0 20upx;
				color: #333;
				align-items: center;
				justify-content: center;

				// u-icon {
				// font-family: uicon-iconfont;
				// }

				text {
					font-size: 24upx;
					//字体会影响图片显示。。。
					// font-family: PingFang SC, PingFang SC-Bold;
					letter-spacing: 3upx;
				}
			}

		}
	}

	.my-order {
		position: absolute;
		top: 315upx;
		left: 36upx;
		right: 36upx;
		height: 240upx;

		text {
			display: inline-block;
			font-size: 32upx;
			margin: 28upx 0 0 40upx;
		}

		.order {
			@include flex;
			margin-top: 30upx;
			justify-content: space-around;

			.order-item {
				@include flex(column);
				justify-content: center;
				align-items: center;

				image {
					width: 72upx;
					height: 72upx;
				}

				text {
					font-size: 24upx;
					margin: 10upx 0 0;
				}
			}
		}
	}

	.test {
		margin: 190upx 36upx 0;

		.invite {
			width: 100%;
			height: 200upx;
			box-shadow: 2upx #efefef;
		}
	}

	.profit {
		height: 215upx;
		margin: 20upx 36upx 0;
		@include flex;
		align-items: center;

		.profit-item {
			@include flex(column);
			justify-content: center;

			.rect-text {
				width: 171upx;
				height: 56upx;
				text-align: center;
				line-height: 56upx;
				font-size: 26upx;
				color: #333;
				margin-top: 10upx;
				border-radius: 90upx;
				border: solid 2upx #666;
				position: relative;
				left: -10upx;
				// box-sizing: border-box;
			}

			.circle-text {
				width: 173upx;
				height: 58upx;
				text-align: center;
				line-height: 58upx;
				font-size: 26upx;
				color: white;
				margin-top: 10upx;
				background-color: #20C3AA;
				border-radius: 90upx;
				position: relative;
				left: -10upx;
			}
		}
	}

	.logout {
		height: 98upx;
		display: block;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: #20C3AA;
		border-radius: 13upx;
		background-color: white;
		border: solid 2upx #20C3AA;
		margin: 40upx 36upx 60upx;
		font-weight: 600;

	}
</style>
